<template>
  <view class="content">
    <view class="titleAddress" style="margin-bottom: 30rpx;padding-top: 30rpx;box-sizing: border-box;">
      <view class="titleText">
        <view>
          <text> 卓悦中心ONE AVENUE店 </text>
          <u-icon name="arrow-right" size="25rpx"></u-icon>
        </view>
        <view><u-icon name="map" color="#ADB838" size="35rpx"></u-icon><text>距离您&nbsp;{{ 515 }}m</text></view>
      </view>
      <view class="changeGet">
        <view :class="getFootMethod ? 'selectedGet' : ''" @click="changeGet()">自取</view>
        <view :class="!getFootMethod ? 'selectedGet' : ''" @click="changeGet()">外卖</view>
        <view class="changeBG" :style="getFootMethod ? 'left:0' : 'left:45%'"></view>
      </view>
    </view>
    <u-notice-bar :text="text1" icon="" mode="link" bgColor="#E7EACF" color="#ADB838" speed="80"></u-notice-bar>
    <view class="main">
      <view class="menu">
        <scroll-view :scroll-top="scrollTop_title" scroll-y="true" class="scroll-Y" style="height: 86vh">
          <block v-for="(item, index) in category_title" :key="index">
            <view :class="
                scrollTop_titleShow == index
                  ? 'menu_item menu_itemSelected'
                  : 'menu_item'
              " @click="change_title(index)">{{ item }}</view>
          </block>
        </scroll-view>
      </view>
      <view class="category">
        <view>
          <swiper circular indicator-dots="true" autoplay="true" interval="4000" duration="500" class="swiper">
            <swiper-item v-for="(item, index) in swiperList" :key="index">
              <view class="swiper-item">
                <image :src="item"></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
        <scroll-view :scroll-top="scrollTop_main" scroll-y="true" style="height: 65vh" class="category_main"
          @scroll="getScrollHeight">
          <block v-for="(item, index) in shopList" :key="index">
            <view class="categoryList">
              <view class="category_title">{{ item.name
                }}<u-icon name="thumb-up-fill" color="#f00" size="28" v-if="index != 0"></u-icon></view>
              <view class="category_item" v-for="(t, i) in item.content" :key="i" ref="categoryItem">
                <view>
                  <image :src="t.image"></image>
                </view>
                <view class="category_itemText">
                  <view>{{ t.name }}</view>
                  <view>{{ t.content }}</view>
                  <view>￥{{ t.price
                    }}
                    <view @click="choose(index, i)"><u-icon name="plus" color="#fff" size="10"></u-icon></view>
                  </view>
                </view>
              </view>
            </view>
          </block>
        </scroll-view>
      </view>
    </view>
    <u-overlay :show="ShoppingCartshow" @click="ShoppingCartshow = false">
      <view class="ShoppingCartList" @tap.stop>
        <view class="ShoppingCartListTitle" @click="Clear">清空</view>
        <block v-for="(item, index) in ShoppingCartList" :key="index">
          <view class="ShoppingCartListItem">
            <view>{{ item[0].name }}</view>
            <view>￥{{ item[0].price * item.length }}</view>
            <view class="changeNum">
              <view @click="remove(index)">
                <u-icon name="minus" color="#fff" size="10"></u-icon>
              </view>{{ item.length
              }}
              <view @click="add(index)">
                <u-icon name="plus" color="#fff" size="10"></u-icon>
              </view>
            </view>
          </view>
        </block>
      </view>
    </u-overlay>
    <view class="ShoppingCart" @click="ShoppingCartshow = true" v-if="ShoppingCartList != ''">
      <view>
        <image src="/src/static/logo.png"></image>
        <view class="badge" v-if="ShoppingCart.length != 0">{{ ShoppingCart.length }}
        </view>
      </view>
      <view>￥{{ TotalPrice }}</view>
      <view class="goSettle" @click.stop="goSettle"> 去结算 </view>
    </view>
    <!-- </u-overlay> -->
  </view>
</template>
<script>
  export default {
    data() {
      return {
        getFootMethod: true,
        text1: '霸气mini卡"超级购券活动，赶紧去购买',
        swiperList: [
          "/static/index/swiper1.jpg",
          "/static/index/swiper2.jpg",
          "/static/index/swiper3.jpg",
        ],
        category_title: [
          "奈雪早餐",
          "新品推荐",
          "招牌热卖",
          "软欧包",
          "手作烘焙",
          "芝士茗优茶",
          "无糖茶铺",
          "咖啡",
          "保温加购",
          "共同防疫",
          "企业团餐",
          "三明治",
          "霸气芝士鲜果",
          "茶",
          "霸气鲜果茶",
          "霸气冰淇淋鲜",
          "果茶",
          "宝藏鲜奶茶",
          "热饮推荐",
          "美好甜品",
        ],
        shopList: [{
            name: "奈雪早餐",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "新品推荐",
            content: [{
                image: "/static/order/tea1.png",
                name: "脏脏王",
                content: "酥軟口感进口奶油搭配特制巧.…",
                price: 18,
              },
              {
                image: "/static/order/tea2.png",
                name: "抹茶王",
                content: "精选北比川半兵卫抹茶粉和秘制",
                price: 18,
              },
              {
                image: "/static/order/tea1.png",
                name: "霸气杨梅",
                content: "饱满大颖的新鲜杨梅，满杯手工，",
                price: 15,
              },
            ],
          },
          {
            name: "招牌热卖",
            content: [{
                image: "/static/order/tea1.png",
                name: "霸气榴莲王",
                content: "马来西亚D24榴莲王果肉+芒",
                price: 28,
              },
              {
                image: "/static/order/tea1.png",
                name: "芝士波波",
                content: "鲜奶与芝士的完美结合，口感丰富",
                price: 22,
              },
              {
                image: "/static/order/tea1.png",
                name: "蜜桃乌龙",
                content: "清新的乌龙茶搭配甜美的蜜桃，口感醇厚",
                price: 22,
              },
              {
                image: "/static/order/tea1.png",
                name: "奈雪奶盖",
                content: "鲜奶与茶香的完美结合，口感浓郁",
                price: 18,
              },
              {
                image: "/static/order/tea1.png",
                name: "抹茶拿铁",
                content: "精选北比川半兵卫抹茶粉和秘制",
                price: 18,
              },
            ],
          },
          {
            name: "软欧包",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "手作烘焙",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "芝士茗优茶",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "无糖茶铺",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "咖啡",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "保温加购",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "共同防疫",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "企业团餐",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "三明治",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "霸气芝士鲜果",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "茶",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "霸气鲜果茶",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "霸气冰淇淋鲜",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "果茶",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "宝藏鲜奶茶",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "热饮推荐",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
          {
            name: "美好甜品",
            content: [{
              image: "/static/order/tea1.png",
              name: "奈雪早餐",
              content: "购买三明治，享早餐指定饮品购买三明治，享早餐指定饮品",
              price: 18.5,
            }, ],
          },
        ],
        scrollTop_title: 0, //左菜单滚动距离
        scrollTop_titleShow: 0, //控制左菜单选中项
        scrollTop_main: 0, //右侧内容滚动的距离
        titleHeightList: [], //右侧内容小标题与顶部的距离
        ShoppingCart: [], //已选择的商品
        TotalPrice: 0,
        ShoppingCartshow: false, //购物车列表遮罩层
        ShoppingCartList: [], //购物车列表
      };
    },
    methods: {
      changeGet() {
        this.getFootMethod = !this.getFootMethod;
      },

      change_title(index) {
        //左侧菜单点击事件，
        console.log(index);
        this.scrollTop_titleShow = index; //用来改变右侧内容的滚动距离
        this.scrollTop_main = this.titleHeightList[index] + 10; //+10解决小bug
      },
      getScrollHeight(e) {
        //得到右侧内容滚动的距离
        const scrollTopMain = e.detail.scrollTop;
        this.titleHeightList.forEach((item, index) => {
          //遍历titleHeightList高度数组的到仅大于scrollTopMain的值拿到下标给左侧菜单添加选中样式
          if (scrollTopMain >= item) {
            this.scrollTop_titleShow = index;
          }
        });
      },
      getMenuItemTop() {
        //这个方法用来拿到右侧内容小标题与顶部的距离titleHeightList
        new Promise((resolve) => {
          let selectorQuery = uni.createSelectorQuery();
          selectorQuery
            .selectAll(".categoryList")
            .boundingClientRect((rects) => {
              if (!rects.length) {
                setTimeout(() => {
                  this.getMenuItemTop();
                }, 1000);
                return;
              }
              rects.forEach((rect) => {
                this.titleHeightList.push(rect.top - rects[0].top);
                resolve();
              });
            })
            .exec();
        });
      },

      choose(index, i) {
        const shop = this.shopList[index].content[i];
        this.ShoppingCart.push(shop);
        let newprice = 0;
        this.ShoppingCart.forEach((item) => {
          newprice += item.price;
        });
        this.TotalPrice = newprice; //总价格

        const result = this.ShoppingCart.reduce((acc, cur) => {
          const last = acc[acc.length - 1];
          if (!last || last[0].name !== cur.name) {
            acc.push([cur]);
          } else {
            last.push(cur);
          }
          return acc;
        }, []);
        this.ShoppingCartList = result;
        console.log(result);
      },
      Clear() {
        this.ShoppingCart = [];
        this.TotalPrice = 0;
        this.ShoppingCartList = [];
        this.ShoppingCartshow = false;
      },
      remove(index) {
        // log(index);
        console.log(index);
        // this.ShoppingCartList[index].pop();
        if (this.ShoppingCartList[index].length > 1) {
          this.ShoppingCartList[index].pop();
        } else if (this.ShoppingCartList[index].length === 1) {
          this.ShoppingCartList.splice(index, 1);
          this.ShoppingCartshow = false;
        } else {
          this.ShoppingCartList = [];
        }
        let newprice = 0;
        this.ShoppingCartList.forEach((item) => {
          item.forEach((t) => {
            newprice = newprice + t.price;
          });
        });
        this.TotalPrice = newprice; //总价格
      },
      add(index) {
        console.log(index);
        let newArray = this.ShoppingCartList[index][0];
        let newprice = 0;

        this.ShoppingCartList[index].push(newArray);
        this.ShoppingCartList.forEach((item) => {
          item.forEach((t) => {
            newprice = newprice + t.price;
          });
        });
        this.TotalPrice = newprice; //总价格
      },

      goSettle() {
        uni.navigateTo({
          url: "./payfor",
        });
      },
    },
    onShow() {
      console.log(uni.getStorageSync("takeFoodWay").id);
      const id = uni.getStorageSync("takeFoodWay").id;
      if (id == 0) {
        this.getFootMethod = true;
      } else if (id == 1) {
        this.getFootMethod = false;
      } else {
        this.getFootMethod = true;
      }
    },
    onLoad() {},
    onReady() {
      this.getMenuItemTop();
    },
    mounted() {},
  };
</script>
<style scoped>
  .titleAddress {
    width: 96%;
    margin: 0 auto 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .titleText>view:first-child {
    display: flex;
    width: 500rpx;
  }

  .titleText>view:last-child {
    display: flex;
    margin-top: 10rpx;
    align-items: center;
    color: #888;
    font-size: 26rpx;
  }

  .titleText text {
    /* width: ; */
    margin-right: 10rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .changeGet {
    width: 227rpx;
    height: 62rpx;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 31rpx;
    position: relative;
    padding: 0 5rpx;
    box-sizing: border-box;
  }

  .changeGet>view {
    width: 49%;
    text-align: center;
    font-size: 24rpx;
    height: 62rpx;
    line-height: 62rpx;
    border-radius: 31rpx;
    color: #888;
    z-index: 2;
    transition: all 0.5s;
  }

  .selectedGet {
    color: #fff !important;
    /* width: 55% !important; */
    text-align: center;
  }

  .changeBG {
    position: absolute;
    top: 0;
    width: 55% !important;
    height: 62rpx;
    border-radius: 31rpx;
    background-color: #adb838;
    left: 0;
    z-index: 1 !important;
    transition: all 0.5s;
  }


  .menu {
    float: left;
    transition: all 0.5s;
  }

  .menu_item {
    width: 200rpx;
    height: 95rpx;
    line-height: 95rpx;
    font-size: 28rpx;
    padding: 0 0 0 19rpx;
    box-sizing: border-box;
    background-color: #f5f5f5;
    color: #888;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .menu_itemSelected {
    background-color: #fff;
    color: #000;
  }

  .category {
    float: right;
    background-color: #fff;
    height: 80vh;
    width: 550rpx;
    padding: 19rpx;
    box-sizing: border-box;
  }

  .swiper {
    width: 100%;
    height: 265rpx;
    border-radius: 10rpx;
    overflow: hidden;
  }

  .swiper-item {
    background-color: #adb838;
    height: 100%;
  }

  .swiper-item image {
    height: 100%;
    width: 100%;
  }

  .category_main {
    margin: 15rpx 0 0 0;
    transition: all 0.5s;
  }

  .category_title {
    margin: 20rpx 0;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: #fff;
    transition: all 0.5s;
    z-index: 10;
  }

  .category_item {
    width: 100%;
    box-sizing: border-box;
    transition: all 0.5s;
    display: flex;
    margin-bottom: 20rpx;
  }

  .category_item image {
    width: 152rpx;
    height: 152rpx;
    border-radius: 10rpx;
  }

  .category_itemText {
    font-size: 26rpx;
    padding: 0 0 0 20rpx;
    box-sizing: border-box;
  }

  .category_itemText>view:first-child {
    letter-spacing: 1rpx;
  }

  .category_itemText>view:nth-child(2) {
    width: 100%;
    color: #888;
    overflow: hidden;
    margin: 20rpx 0 22rpx;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .category_itemText> :nth-child(3) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
  }

  .category_itemText> :nth-child(3)>view:last-child {
    height: 30rpx;
    width: 30rpx;
    border-radius: 50%;
    background-color: #adb838;
    display: flex;
    justify-content: center;
    align-items: center;
    /* color: #fff;
  font-weight: 500;
  text-align: center;
  line-height: 30rpx;
  font-weight: 800; */
  }

  .ShoppingCart {
    position: fixed;
    bottom: 120rpx;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    width: 92%;
    height: 90rpx;
    border-radius: 50rpx;
    z-index: 10071;
    display: flex;
    align-items: center;
    box-shadow: 0rpx 0rpx 20rpx rgba(155, 155, 155, 0.5);
    animation: myCart 0.5s;
  }

  @keyframes myCart {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }

    to {
      transform: translateX(-50%);
      opacity: 1;
    }
  }

  .goSettle {
    width: 150rpx;
    height: 90rpx;
    border-top-right-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    background-color: #adb838;
    margin-left: auto;
    line-height: 90rpx;
    text-align: center;
    color: #fff;
    font-size: 26rpx;
  }

  .ShoppingCart>view:first-child {
    margin-left: 60rpx;
    transform: translateY(-35%);
    position: relative;
  }

  .ShoppingCart>view:nth-child(2) {
    margin-left: 30rpx;
  }

  .ShoppingCart>view:first-child image {
    height: 100rpx;
    width: 90rpx;
  }

  .badge {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    background-color: #fabe2a;
    font-size: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: absolute;
    top: 0;
    right: -10rpx;
  }

  .ShoppingCartList {
    width: 100%;
    background-color: #fff;
    padding-bottom: 180rpx;
    /* margin:  auto; */
    position: absolute;
    font-size: 26rpx;
    bottom: 100rpx;
    left: 50%;
    transform: translateX(-50%);
  }

  .ShoppingCartListTitle {
    background-color: #e7eacf;
    color: #adb838;
    text-align: right;
    padding: 0 20rpx;
    height: 50rpx;
    line-height: 50rpx;
    box-sizing: border-box;
    font-size: 26rpx;
  }

  .ShoppingCartListItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 92%;
    height: 90rpx;
    margin: 0 auto;
    border-bottom: 1rpx solid rgba(155, 155, 155, 0.2);
  }

  .ShoppingCartListItem>view:first-child {
    width: 250rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .ShoppingCartListItem>view:nth-child(2) {
    width: 200rpx;
    text-align: right;
  }

  .changeNum {
    display: flex;
    height: 80rpx;
    align-items: center;
  }

  .changeNum view {
    width: 30rpx;
    height: 30rpx;
    margin: 0 15rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #adb838;
  }
</style>